<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>定制--个性化定制</title>
		<include file="public/comm" />
	</head>
	<body>
		<!--<iframe src="{$goods.tmp_url}" width="100%" height="100%"></iframe>-->
		
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
			<h1 class="mui-title fs_xl">定制</h1>
		</header>
		<!--下方导航-->
		<div class="mui-content fs_xl" style="overflow: hidden;">
			<form id="buy_goods_form">
			<if $goods.tmp_info.pagestyle == 0 || empty($goods.tmp_info.pagestyle)>
			<div class="pz_dz cls">
				<div class="pz_xz">
					<a class="fs_l">瓶子选择<i class="mui-icon mui-icon-arrowdown fs_xl"></i></a>
					<ul class="pz_ul fs_l" id="pz_xz">
						<li class="mui-icon mui-icon-checkmarkempty active fs_l">红瓶子</li>
						<li>白瓶子</li>
					</ul>
				</div>
				<div class="bk_xz">
					<a class="fs_l">边框选择<i class="mui-icon mui-icon-arrowdown fs_xl"></i></a>
					<ul class="pz_ul fs_l" id="bk_xz">
						<li class="mui-icon mui-icon-checkmarkempty active fs_l">金</li>
						<li>红</li>
						<li>蓝</li>
					</ul>
				</div>
			</div>
			<div class="dz_m fs_xl">
				<img class="dz_bgimg fs_xl active" src="__STATIC__/images/pingzi.png" />
				<img class="dz_bgimg fs_xl" src="__STATIC__/images/pingzi1.png" />
				<div class="dz_bk fs_xl dz_m_js active"></div>
				<div class="dz_bk fs_xl dz_m_hs"></div>
				<div class="dz_bk fs_xl dz_m_ls"></div>
				<div class="dz_up fs_xl" id="preview">
					<img id="imghead" border="0" src="__STATIC__/images/shangc11.png" width="90" height="90" onclick="$('#doc').click();">
                    <input style="display: none;" type="file" name="file" id="doc"  style="width:150px;" onchange="selectImage(this);" />
					<input type="hidden" id="despic" name="goods_spec[other_content][despic]" value="" />
					<div id="dd" style=" width:100%;position: absolute;top:0;left:0">
						<img id="image" src="" />
					</div>
				</div><!--图片上传-->
				<div class="dz_wz fs_xl">
					<img src="__STATIC__/images/pt_erm.jpg" />
					<input class="fs_m" type="text" name="goods_spec[other_content][message]" id="dz_txt" placeholder="请输入你想说的话!" />
					<span class="yc_yl"></span>
				</div>
			</div>
			<script>
				mui.init();
				var winW = $("body").width();
				var liW = (winW - 1) / 2;
				var winH=$("body").height();
				var dzH=winH-$("header").height()-$(".pz_dz").height()-$(".dz_nav").height()-$(".yl_dd").height()-1;
				$(".dz_m").height(dzH);
				$(".pz_xz,.bk_xz").width(liW);
				$(function(){
					$(".pz_xz a,.bk_xz a").toggle(function(){
						$(this).siblings("ul").show();
					},function(){
						$(this).siblings("ul").hide();
					});
					$(".pz_ul li").click(function(){
						$(this).addClass("mui-icon mui-icon-checkmarkempty fs_l");
						$(this).css("color","#ec2821");
						$(this).siblings().removeClass("mui-icon mui-icon-checkmarkempty fs_l");
						$(this).siblings().css("color","#333");
					});
					$("#pz_xz li").click(function(){
						$("#pz_xz li").removeClass("active").eq($("#pz_xz li").index(this)).addClass("active");
	        			$(".dz_bgimg").hide().eq($('#pz_xz li').index(this)).show();
					});
					$("#bk_xz li").click(function(){
						$("#bk_xz li").removeClass("active").eq($("#bk_xz li").index(this)).addClass("active");
	        			$(".dz_bk").hide().eq($('#bk_xz li').index(this)).show();
					});
					$(document).click(function(e){
	  					var _con = $('.pz_ul');   // 设置目标区域
	  					if(!_con.is(e.target) && _con.has(e.target).length === 0){
	      				 	$('.pz_ul').hide();
	  					}
					});
					$("#dd").on("click","img",function(){
						$('#doc').click();
					});
				})
				var image = '';
				function selectImage(file) {
					if(!file.files || !file.files[0]) {
						return;
					}
					var reader = new FileReader();
					reader.onload = function(evt) {
						document.getElementById('image').src = evt.target.result;
						image = evt.target.result;
						console.log(image);
						$("#despic").val(image);
					}
					reader.readAsDataURL(file.files[0]);
				}
			</script>
			<script>
				var bodW=$("body").width();
				var pz_W=$(".dz_bgimg").width();
				var pz_H=$(".dz_bgimg").height();
				$(".dz_bk").width(pz_W*0.75);
				$(".dz_bk").css("top",pz_H*0.3+15);
				$(".dz_bk").height(pz_H*0.55);
				$(".dz_up").height(pz_H*0.55-10);
				$(".dz_up").css("top",pz_H*0.3+20);
				var bk_L=(bodW-pz_W*0.75)/2;
				$(".dz_up").width($(".dz_bk").width());
				var up_L=(bodW-$(".dz_up").width())/2;
				$(".dz_bk").css("left",bk_L);
				$(".dz_up").css("left",up_L);
				$(".dz_wz").width($(".dz_bk").width()+10);
				$(".dz_wz").css("left",bk_L);
				var dz_t=$(".dz_m").height()-pz_H-15+pz_H*0.025;
				$(".dz_wz").css("bottom",dz_t);
				$(".dz_wz input").height($(".dz_wz img").height());
			</script>
			
			<else>
			<style>
				.dz_m .dz_bgimg{margin-top: 0;padding-top: 10%;width: 60%;}
				.dz_m .dz_up{position: absolute;width:6em;height:4em;top:52%;left:37%;z-index: 9;padding: 10px;}
				.dz_m .dz_bk{position: absolute;width:6em;height:4em;background: #fff;top:52%;left:37%;display: none;}
				.dz_m .active{display: block;}
				#imghead{vertical-align: middle;margin: 0 auto;width: 87%;height: 100%;}
				#image{width:100% !important;height: 100% !important;}
				#dd{width:100%;position: absolute;top:0;left:0;height: 100% !important;padding: 0 !important;margin-top: 0 !important;}
				.dz_wz1{position: absolute;width:6em;bottom: -2em;left:0;z-index: 10;}
				.dz_wz1 input{width:100%;margin-bottom: 0;padding: 0 5px;height: 2em;}
			</style>
			<div class="dz_m" style="margin: 0;">
				<!--<img class="dz_bgimg active" src="__STATIC__/images/pingz3.png" />-->
				<img class="dz_bgimg active" src="{$goods.tmp_info.img_bg}" />
				<div class="dz_bk active">
					<div class="dz_wz1">
						<input class="fs_xs" type="text" name="" id="dz_txt" placeholder="定制文字!" />
					</div>
				</div>
				<div class="dz_up" id="preview">
					<img id="imghead" border="0" src="__STATIC__/images/jia.png"  onclick="$('#doc').click();">
					<input hidden="hidden" type="file" capture="camera" accept="image/*;" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="selectImage(this);" accept="images/*" />
					<div id="dd">
						<img id="image" src="" />
					</div>
					
				</div>
				<!--图片上传-->
			</div>
			<script>
				mui.init();
				var winW = $("body").width();
				var liW = (winW - 1) / 2;
				var winH = $("body").height();
				var dzH = winH - $("header").height() - $(".pz_dz").height()-$(".yl_dd").height() - $(".dz_nav").height() - 1;
				$(".dz_m").height(dzH);
				$(function() {
					$("#dd").on("click", "img", function() {
						$('#doc').click();
					});
				})
				var image = '';
	
				function selectImage(file) {
					if(!file.files || !file.files[0]) {
						return;
					}
					var reader = new FileReader();
					reader.onload = function(evt) {
						document.getElementById('image').src = evt.target.result;
						image = evt.target.result;
					}
					reader.readAsDataURL(file.files[0]);
				}

				$(document).ready(function(){
					var bodW = $("body").width();
					var pz_W = $(".dz_bgimg").width();
					var pz_H = $(".dz_bgimg").height();
					$(".dz_wz input").height($(".dz_wz img").height());
				})	
			</script>
			</else>
			</if>
			<div class="yl_dd" style="z-index: 9999;">
				<span>¥{$goods.shop_price}/瓶</span>
				<span class="fs_m">购买数量:
				<div class="mui-numbox fs_m" data-numbox-min='30' data-numbox-step='6' style="width: 80px;padding: 0;">
					<button class="mui-btn mui-btn-numbox-minus" type="button" style="left: 0;">-</button>
					<input class="mui-input-numbox" name="goods_num" value="30" type="number" style="vertical-align: top;" />
					<button class="mui-btn mui-btn-numbox-plus" type="button" style="right: 0;">+</button>
				</div></span>
				<span class="fs_xs">30瓶起订</span>
				<input type="hidden" name="goods_id" value="{$goods.goods_id}" />
				<input type="hidden" name="goods_spec[酒精度]" value="{$goods.degree}°" />
				<input type="hidden" name='goods_spec[香型]' value="{$goods.aromaname}" />
			</div>
			<div class="dz_nav">
				<a href="javascript:;" class="ylxg" onclick="addTcart()">加入购物车</a>
				<a href="{:U('Destine/designList',array('suppliers_id'=>$goods.suppliers_id))}" class="tel_sj">呼叫设计师</a>
			</div>
			</form>
		</div>
		<script>            
            function addTcart(){
            	var num = $("input[name=goods_num]").val();
            	
            	AjaxAddCart({$goods.goods_id},num,0);
            }
		</script>
		<script type="text/javascript">
			$(function() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if(isAndroid) {
					$("#doc").attr("accept","image/*");
					$("#doc").attr("capture","camera");
				}
				if(isIOS) {
					return false;
				}
			});
		</script>
	</body>

</html>